<div class="register-container">
  <div class="register-card">
    <h2>用户注册</h2>
    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="register-form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          formControlName="username"
          placeholder="请输入用户名（至少4个字符）"
          [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched"
        >
        <div class="error-message" *ngIf="getErrorMessage('username')">
          {{ getErrorMessage('username') }}
        </div>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          formControlName="password"
          placeholder="请输入密码（至少6个字符）"
          [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched"
        >
        <div class="error-message" *ngIf="getErrorMessage('password')">
          {{ getErrorMessage('password') }}
        </div>
      </div>

      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input
          type="password"
          id="confirmPassword"
          formControlName="confirmPassword"
          placeholder="请再次输入密码"
          [class.is-invalid]="registerForm.get('confirmPassword')?.invalid && registerForm.get('confirmPassword')?.touched"
        >
        <div class="error-message" *ngIf="getErrorMessage('confirmPassword')">
          {{ getErrorMessage('confirmPassword') }}
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" [disabled]="isLoading || registerForm.invalid">
          {{ isLoading ? '注册中...' : '注册' }}
        </button>
        <a routerLink="/login" class="login-link">已有账号？立即登录</a>
      </div>

      <div class="error-message" *ngIf="registerError">
        {{ registerError }}
      </div>
    </form>
  </div>
</div>